<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>引出生命周期</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <!-- 绑定的style和data名相同，可以简写成一个 -->
            <!-- <h2 :style="{opacity:opacity}">点我创建input框</h2> -->
            <!-- 简写 -->
            <h2 :style="{opacity}">点我创建input框</h2>
            <!-- 即使点击按钮，n++，页面会重新渲染，但是不会再调用mounted()函数了 -->
            <button @click="n++">点我n++</button>
            <h2>{{n}}</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示
            const vm =  new Vue({
                el:'#root',
                data:{
                    opacity:1,
                    n:0
                },
                //挂载：数据第一次渲染时调用，后面数据再有变化也不会再调用了
                mounted(){
                    console.log('mounted...',this)//这里的this是vue实例
                     setInterval(() => {
                        vm.opacity -= 0.01
                        if(vm.opacity <= 0){ //不能用===0，因为可能会跳过0，js中0.1+0.2!=0.3
                            vm.opacity = 1
                        }
                    },16)
                }
            })

            //通过外部定时器（不推荐），让h2中的内容逐渐淡化
            // setInterval(() => {
            //     vm.opacity -= 0.01
            //     if(vm.opacity <= 0){ //不能用===0，因为可能会跳过0，js中0.1+0.2!=0.3
            //         vm.opacity = 1
            //     }
            // },16)
        </script>

        
    </body>
</html>